<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body {
		    font-family: Arial, sans-serif;
		    background-color: #f0f0f0;
		    margin: 0;
		    padding: 20px;
			}

			.container {
			    width: 80%;
			    margin: 0 auto;
			    background-color: #fff;
			    padding: 20px;
			    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
			}
			
			.image-list {
			    list-style: none;
			    padding: 0;
			    margin: 0;
			    display: flex;
			    justify-content: space-between;
			}
			
			.image-list li {
			    background-color: #f9f9f9;
			    padding: 10px;
			    margin: 10px;
			    border-radius: 5px;
			    float: left;
			    width: 22%;
			    box-sizing: border-box;
			    transition: transform 0.3s, background-color 0.3s;
			}
			
			.image-list li:hover {
			    transform: translateY(-5px);
			    background-color: #e9e9e9;
			}
			
			.image-list li a {
			    text-decoration: none;
			    color: #333;
			    display: block;
			    text-align: center;
			}
			
			.image-list li img {
			    width: 100%;
			    height: auto;
			    border-radius: 5px;
			}
	
			.image-list li span {
			    display: block;
			    margin-top: 10px;
			    font-size: 14px;
			}	
		</style>
	</head>
	<body>
		<div class="container">
        <ul class="image-list">
            <li>
                <a href="#">
                    <img src="../img/pic_1.jpg" alt="图片描述">
                    <span>室外居家空间设计</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="../img/pic_1.jpg" alt="图片描述">
                    <span>室外居家空间设计</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="../img/pic_1.jpg" alt="图片描述">
                    <span>室外居家空间设计</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="../img/pic_1.jpg" alt="图片描述">
                    <span>室外居家空间设计</span>
                </a>
            </li>
        </ul>
    </div>
	</body>
</html>
